<template>
<div class="header-box">
  <div class="header">
    <div class="img-block">
      <img src="../../../assets/image/logo.png" >
    </div>
    <span class="text">职引官</span>
    <div class="header-right">
      <router-link to="/home">首页</router-link>
      <router-link to="/cir">
        <!-- <span class="yxq">引享圈</span> -->
        引享圈
      </router-link>
      <router-link :to="{path:'/jobdetail',query: {Detail: 'DetailMiddle'}}">
        <!-- <span></span> -->
        职位行情
      </router-link>
      <router-link to="/test">
        <!-- <span class="cyc"></span> -->
        测一测
      </router-link>
      <span @click="show=true" class="ask border">我要提问</span>
    </div>
    <model :model="show" @ccc="()=>show=false"></model>
  </div>
</div>
</template>
<script>
// 弹出框组件
import model from "./Model";
export default {
  name: "DetailHeader",
  data() {
    return {
      show: false
    };
  },
  components: {
    model
  },
  methods: {}
};
</script>
<style lang="stylus" scoped>
@import '~styles/variables';
.header-box{
  height: 1rem;
  margin-top: 0.15rem;
  margin-bottom: 0.25rem;
  background-color: #404040;
  justify-content: start;
  align-items: center;
  color: #fff;
}
.header {
  // display: flex;
  height: 1rem;
  justify-content: start;
  align-items: center;
  color: #fff;
  width:1260px;
  margin: auto;
  .img-block {
    display: inline-block;
    // margin-left: $leftOffset;
    // margin-left:15px;
    background-color: $logoColor;
    // min-width: 2rem;
    min-width: 220px;
    height: 1.3rem;
    line-height: 1.3rem;
    margin-top: -0.15rem;
    text-align: center;
  }

  .text {
    margin-left: 0.1rem;
    white-space: nowrap;
    font-size: 24px;
  }

  .header-right {
    // position: absolute;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.18rem;
    overflow: hidden;
    // left: 9.8rem;
    float:right;
    

    a {
      margin: 0 0.42rem;
      color:#fff;
      font-size:16px
    }
  }

  .yxq {
    margin: 0 0.5rem 0 0.8rem;
  }

  .cyc {
    margin: 0 0.8rem 0 0.7rem;
  }

  .ask {
    padding: 0.1rem;
    cursor: pointer;
    font-size: 16px
  }

  .current {
    padding-bottom: 36px;
    border-bottom: 4px solid yellow;
  }
}
</style>
